<template>
  <div id="son">
    <!-- 导航栏 -->
    <div id="nav">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <div @click="showMain">
          <el-breadcrumb-item >志愿者招聘1</el-breadcrumb-item>
        </div>
      </el-breadcrumb>
    </div>
    <!-- 用户展示 -->
    <div id="body">
      <ul>
        <img
          style="height: 250px"
          :src="poorList.picture"
        />
        <li style="height: 100%">
          <el-descriptions
            :title='poorList.workSalary'
            direction="horizontal"
            size="medium "
            :column="1"
            border
          >
            <el-descriptions-item label="手机号"
              >{{poorList.contact}}</el-descriptions-item
            >
            <el-descriptions-item label="招聘要求"
              >{{poorList.workPlace}}</el-descriptions-item
            >
            <el-descriptions-item label="工资待遇"
              >{{poorList.workSalary}}</el-descriptions-item
            >
            <el-descriptions-item label="工作时间"
              >{{poorList.workTime}}</el-descriptions-item
            >
            <el-descriptions-item label="招聘人数"
              >{{poorList.recruitsNum}}</el-descriptions-item
            >
            <el-descriptions-item label="截至时间"
              >{{poorList.recruitsTime}}</el-descriptions-item
            >
            <el-descriptions-item label="负责人"
              >{{poorList.lead}}</el-descriptions-item
            >
            <el-descriptions-item label="点击次数">{{poorList.clickNum}}</el-descriptions-item>
          </el-descriptions>
        </li>
      </ul>
    </div>
    <!-- 用户信息 -->
    <div id="info">
      <el-tabs type="border-card">
        <el-tab-pane label="详细介绍">  
          {{poorList.introduce}}
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return {
      poorList:{},
    }
  },
  props:['msg'],
  methods:{
    async getpoorlist(){
      let {data:res} = await this.$axios.get('/volunteer/getlist?pageSize=1&pageNum=1',{
        params:{
          lead:this.msg
        }
      });
      this.poorList = res.data.list[0];
    },
    showMain(){
      this.$emit('showSon','showMain')
     
    }
  },
  mounted () {
    this.getpoorlist();
  }
};
</script>

<style lang="scss" scoped>
#son {
  margin: 0 auto;
  width: 65%;
  #nav {
    width: 98%;
    line-height: 20px;
    padding: 15px 15px;
    background-color: rgb(148, 246, 241);
    margin: 20px 0px 0px 0px;
    border-radius: 2px;
  }
  #body {
    height: 50%;
    ul {
      display: flex;
      flex-wrap: nowrap;
      li {
        width: 550px;
        margin: 0px 40px;
        list-style: none;
      }
    }
    img {
      border: 1px solid rgb(238, 243, 246);
      margin-top: 40px;
      box-shadow: 1px 1px 3px 3px;
    }
  }
  #info{
    width: 100%;
  }
}
</style>